<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <base href="<%=basePath%>">

  <title>My JSP 'editTeacherInfo.jsp' starting page</title>

  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="expires" content="0">
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="This is my page">
  <!--
  <link rel="stylesheet" type="text/css" href="styles.css">
  -->
  <link rel="stylesheet" href="css/bootstrap.min.css">

  <style type="text/css">
    .div_ads {
      width: 75%;
      margin: 0 auto;
      margin-top: 50px;
      margin-left: 10%;
    }
    a{
      cursor: pointer
    }
    table {
      margin: 0 auto;
      width:100%;
      border-collapse:separate;
      border-spacing:0px 10px;
    }

    table tr td {
      text-align: center;
      width:150px;
      height:44px;
    }

    font{
      color:red;
      font-weight: bold;
    }
  </style>
  <script src="js/jquery-3.3.1.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/particle-bg.umd.min.js"></script>
  <script type="text/javascript">
    $(function(){
      $("#myform").submit(function(){
        if(AjaxChecked()&&pwdcheck()){
          return true;

        }else{
          alert("您输入有误！");
          return false;
        }
      })
    })
    function AjaxChecked(){
      var xmlHttpRequest=null;
      if(XMLHttpRequest){
        xmlHttpRequest=new XMLHttpRequest();
      }else{
        xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
      }
      if(xmlHttpRequest!=null){
        //拿到密码
        var pwd=document.getElementById("pwd");
        if(pwd.value==""){
          document.getElementById("pwdcheck").innerHTML = "原密码不能为空";
          return false;
        }
        else{

          var url="ServletSelectPwdById?pwd="+pwd.value;
          xmlHttpRequest.open("get",url,true);

          xmlHttpRequest.send();
          xmlHttpRequest.onreadystatechange=function(){
            if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){
              var text = xmlHttpRequest.responseText;
              //alert(text);
              document.getElementById("pwdcheck").innerHTML = text;

              }
            }
          }
        }
      return true;

    }

    function pwdcheck(){
      var pwd1=document.getElementById("upwd").value;
      if(pwd1==""){
        document.getElementById("upwdcheck").innerHTML = "密码不能为空";
        return false;
      }else if(pwd1.length<6){
        document.getElementById("upwdcheck").innerHTML = "密码不能小于六位";
        return false;
      }else {
        document.getElementById("upwdcheck").innerHTML = "正确";
        return true;
      }


    }
  </script>
</head>

<body>
<form action="ServletEditPwd" method="post" id="myform">

  <div class="div_ads">

    <table>
      <tr>
        <td>账&nbsp;&nbsp;&nbsp;号：</td>
        <td><input type="text" name="teaNum" class="form-control" value="${unum}" readonly="readonly" /></td>
      </tr>
      <tr>
        <td>原&nbsp;密&nbsp;&nbsp;码：</td>
        <td><input type="password" name="pwd" class="put form-control" id="pwd" onblur="AjaxChecked();" placeholder="请输入原密码" aria-describedby="basic-addon1"/></td>
        <td><font id="pwdcheck"></font></td>
      </tr>
      <tr>
        <td>新&nbsp;密&nbsp;&nbsp;码：</td>
        <td><input type="password" name="upwd" class="put form-control" id="upwd" onblur="pwdcheck();"  placeholder="请输入新密码" aria-describedby="basic-addon1"/></td>
        <td><font id="upwdcheck"></font></td>
      </tr>
      <tr>
        <td><input type="submit" value="修改" class="btn btn-primary" /></td>
        <td><input type="reset" value="清空" class="btn btn-danger" /></td>
      </tr>
    </table>
  </div>
</form>
</body>
</html>